var body2 = document.querySelector(".body2")
var span1 = body2.querySelector(".span1")
var span2 = body2.querySelector(".span2")
var u = document.querySelector(".ul")
var biao = document.querySelector(".biao")
var s = biao.querySelector("span")
window.onload = function () {
    var div1 = document.createElement("div")
    div1.className = "div1"
    u.appendChild(div1)
    var ul = document.createElement("ul")
    ul.className = ".ull"
    div1.appendChild(ul)
    var div2 = document.createElement("div")
    div2.className = "div2"
    u.appendChild(div2)
    var p5 = document.createElement("p")
    p5.innerHTML = "极果体验师"
    p5.className = "p5"
    div2.appendChild(p5)
    var img10 = document.createElement("img")
    img10.src = "./imgs/tiyanimg.jpg"
    div2.appendChild(img10)
    var h6 = document.createElement("h6")
    h6.innerHTML = "福利"
    div2.appendChild(h6)
    var p6 = document.createElement("p")
    p6.innerHTML = "第一时间体验新品，大众试用优先通过，还有定向邀请试用，新品玩到手软！"
    p6.className = "p6"
    div2.appendChild(p6)
    var h7 = document.createElement("h6")
    h7.innerHTML = "要求"
    div2.appendChild(h7)
    var p7 = document.createElement("p")
    p7.innerHTML = "是某个领域的大神级玩家，在社交网络或圈子里有大影响力，善写作会拍摄。"
    p7.className = "p7"
    div2.appendChild(p7)
    var h8 = document.createElement("h6")
    h8.innerHTML = "申请"
    div2.appendChild(h8)
    var p8 = document.createElement("p")
    p8.className = "p8"
    p8.innerHTML = "1. 关注极果公众号：jguojguo（或扫描下方二维码）<br>2. 在公众号内回复：体验师"
    div2.appendChild(p8)
    var p9 = document.createElement("p")
    p9.innerHTML = "关注我們"
    p9.className = "p9"
    div2.appendChild(p9)
    var img11 = document.createElement("img")
    img11.src = "./imgs/myCode.jpg"
    div2.appendChild(img11)
    span2.className = "span2"
    span1.className = "span1 ssp"
    var n = 1
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://localhost:3000/report/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < 8; i++) {
                console.log(list[i]);
                var li = document.createElement("li")
                li.className = "li"
                ul.appendChild(li)
                var img = document.createElement("img")
                img.src = './imgs/bg' + n + '.jpg'
                img.className = "img"
                li.appendChild(img)
                var p = document.createElement("p")
                p.innerHTML = '' + list[i].text + ''
                p.className = "p"
                li.appendChild(p)
                var span5 = document.createElement("span")
                span5.innerHTML = '' + list[i].uName + ''
                span5.className = "span5"
                li.appendChild(span5)
                var span6 = document.createElement("span")
                span6.innerHTML = '' + list[i].endTime + ''
                span6.className = "span6"
                li.appendChild(span6)
                var img1 = document.createElement("img")
                img1.src = "./imgs/zan.png"
                img1.className = "img1"
                li.appendChild(img1)
                var span7 = document.createElement("span")
                span7.innerHTML = 3
                span7.className = "span7"
                li.appendChild(span7)
                var img2 = document.createElement("img")
                img2.src = "./imgs/reply.png"
                img2.className = "img2"
                li.appendChild(img2)
                var span8 = document.createElement("span")
                span8.innerHTML = '' + list[i].num + ''
                span8.className = "span8"
                li.appendChild(span8)
                var div8 = document.createElement("div")
                div8.innerHTML = "點擊查看"
                div8.className = "div8"
                li.appendChild(div8)
                n++

            }
        }
        var lis = document.querySelector(".div1").querySelectorAll("li")
        for (var j = 4; j < lis.length; j++) {
            lis[j].style.display = "none"
        }
        s.onclick = function () {
            for (var j = 4; j < lis.length; j++) {
                lis[j].style.display = "block"
            }
        }
    }
}
///////////
///////////
span1.addEventListener("click", function () {
    var ul = document.querySelector(".div1")
    var li = ul.querySelectorAll("li")
    span2.className = "span2"
    span1.className = "span1 ssp"
    var lis = document.querySelector(".div1").querySelectorAll("li")
    for (var j = 4; j < lis.length; j++) {
        lis[j].style.display = "none"
    }
    var n = 1
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://localhost:3000/report/new', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < 8; i++) {
                console.log(list[i]);
                var img = li[i].querySelector(".img")
                img.src = './imgs/bg' + n + '.jpg'
                var p = li[i].querySelector(".p")
                p.innerHTML = '' + list[i].text + ''
                var span5 = li[i].querySelector(".span5")
                span5.innerHTML = '' + list[i].uName + ''
                var span6 = li[i].querySelector(".span6")
                span6.innerHTML = '' + list[i].endTime + ''
                var img1 = li[i].querySelector(".img1")
                img1.src = "./imgs/zan.png"
                var span7 = li[i].querySelector(".span7")
                span7.innerHTML = 3
                var img2 = li[i].querySelector(".img2")
                img2.src = "./imgs/reply.png"
                var span8 = li[i].querySelector(".span8")
                span8.innerHTML = '' + list[i].num + ''
                var div8 = li[i].querySelector(".div8")
                div8.innerHTML = "點擊查看"
                n++

            }
        }
        s.onclick = function () {
            for (var j = 4; j < lis.length; j++) {
                lis[j].style.display = "block"
            }
        }
    }
})



/////
span2.addEventListener("click", function () {
    var ul = document.querySelector(".div1")
    var li = ul.querySelectorAll("li")
    span2.className = "span2 ssp"
    span1.className = "span1 "
    var lis = document.querySelector(".div1").querySelectorAll("li")
    for (var j = 4; j < lis.length; j++) {
        lis[j].style.display = "none"
    }
    var n = 8
    var obj = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    obj.open('get', 'http://localhost:3000/report/hot', true);
    obj.send();
    obj.onreadystatechange = function () {
        if (obj.readyState == 4 && obj.status == 200) {
            console.log(obj.responseText);
            var list = JSON.parse(obj.responseText)
            console.log(list);
            for (var i = 0; i < 8; i++) {
                console.log(list[i]);
                var img = li[i].querySelector(".img")
                img.src = './imgs/bg' + n + '.jpg'
                var p = li[i].querySelector(".p")
                p.innerHTML = '' + list[i].text + ''
                var span5 = li[i].querySelector(".span5")
                span5.innerHTML = '' + list[i].uName + ''
                var span6 = li[i].querySelector(".span6")
                span6.innerHTML = '' + list[i].endTime + ''
                var img1 = li[i].querySelector(".img1")
                img1.src = "./imgs/zan.png"
                var span7 = li[i].querySelector(".span7")
                span7.innerHTML = 3
                var img2 = li[i].querySelector(".img2")
                img2.src = "./imgs/reply.png"
                var span8 = li[i].querySelector(".span8")
                span8.innerHTML = '' + list[i].num + ''
                var div8 = li[i].querySelector(".div8")
                div8.innerHTML = "點擊查看"
                n--

            }
        }
        s.onclick = function () {
            for (var j = 4; j < lis.length; j++) {
                lis[j].style.display = "block"
            }
        }
    }
})